/* 学习目标：JSX中的列表渲染 - 数组渲染 */

// 类似：v-for
// 原理：数组内的每项元素，会当做一个个节点渲染出来
// 语法： 数组.map(() => <标签>)

import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.querySelector('#root'));
const songs = ['温柔', '倔强12312', '私奔到月球'];

// 提高diff的更新效率
// 🔔 key的口诀：有id用id，没id用唯一，没唯一用下标
//  JSX中标签的属性值，如果是字符串，属性名="值"
//  JSX中标签的属性值，如果是非字符串，属性名={值}
const songsLi = songs.map((item, index) => <li key={index}>{item}</li>);

const ulNode = (
  <>
    <ul>{songsLi}</ul>
    <div>
      {songs.map((item) => {
        return <h1 key={item}>{item}</h1>;
      })}
    </div>
  </>
);
root.render(ulNode);
